<template>
    <view class="container">
        <!-- 状态栏 -->
        <view class="status-bar">
            <view class="status-item">
                <view class="status-dot running"></view>
                <text class="status-text">系统状态</text>
                <text class="status-value">运行中</text>
            </view>
            <view class="status-item">
                <view class="status-dot normal"></view>
                <text class="status-text">安全状态</text>
                <text class="status-value">正常</text>
            </view>
            <view class="status-item">
                <view class="status-dot online"></view>
                <text class="status-text">连接状态</text>
                <text class="status-value">在线</text>
            </view>
            <view class="status-item">
                <view class="status-dot info"></view>
                <text class="status-text">节点ID</text>
                <text class="status-value">{{node_id || 'N/A'}}</text>
            </view>
        </view>

        <!-- 主要内容区域 -->
        <view class="main-content">
            <!-- 环境数据卡片 -->
            <view class="data-card environment-card" @click="goCharts(0)">
                <view class="card-header">
                    <view class="card-icon environment-icon">
                        <text class="icon-text">🌡️</text>
                    </view>
                    <text class="card-title">环境数据</text>
                    <view class="card-arrow">›</view>
                </view>
                <view class="card-content">
                    <view class="data-grid">
                        <view class="data-item">
                            <view class="data-icon">🌡️</view>
                            <view class="data-info">
                                <text class="data-label">温度</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{temp}}</text>
                                    <text class="data-unit">℃</text>
                                </view>
                            </view>
                        </view>
                        <view class="data-item">
                            <view class="data-icon">💧</view>
                            <view class="data-info">
                                <text class="data-label">湿度</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{humi}}</text>
                                    <text class="data-unit">%</text>
                                </view>
                            </view>
                        </view>
                        <view class="data-item">
                            <view class="data-icon">☀️</view>
                            <view class="data-info">
                                <text class="data-label">紫外线</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{uv}}</text>
                                </view>
                            </view>
                        </view>
                        <view class="data-item">
                            <view class="data-icon">🌧️</view>
                            <view class="data-info">
                                <text class="data-label">雨水</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{rain}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 土壤监测卡片 -->
            <view class="data-card soil-card" @click="goCharts(4)">
                <view class="card-header">
                    <view class="card-icon soil-icon">
                        <text class="icon-text">🌱</text>
                    </view>
                    <text class="card-title">土壤监测</text>
                    <view class="card-arrow">›</view>
                </view>
                <view class="card-content">
                    <view class="data-grid">
                        <view class="data-item">
                            <view class="data-icon">💧</view>
                            <view class="data-info">
                                <text class="data-label">土壤湿度</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{soil}}</text>
                                    <text class="data-unit">%</text>
                                </view>
                            </view>
                        </view>
                        <view class="data-item">
                            <view class="data-icon">⚗️</view>
                            <view class="data-info">
                                <text class="data-label">co2值</text>
                                <view class="data-value-container">
                                    <text class="data-value">{{ph}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 光照数据卡片 -->
            <view class="data-card light-card" @click="goCharts(6)">
                <view class="card-header">
                    <view class="card-icon light-icon">
                        <text class="icon-text">💡</text>
                    </view>
                    <text class="card-title">光照数据</text>
                    <view class="card-arrow">›</view>
                </view>
                <view class="card-content">
                    <view class="data-grid single-item">
                        <view class="data-item large">
                            <view class="data-icon large">☀️</view>
                            <view class="data-info">
                                <text class="data-label">光照强度</text>
                                <view class="data-value-container">
                                    <text class="data-value large">{{light}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 设备状态卡片 -->
            <view class="data-card status-card">
                <view class="card-header">
                    <view class="card-icon status-icon">
                        <text class="icon-text">📊</text>
                    </view>
                    <text class="card-title">设备状态</text>
                </view>
                <view class="card-content">
                    <view class="status-grid">
                        <view class="status-item-card">
                            <view class="status-icon-wrapper">
                                <text class="status-icon-text">💡</text>
                            </view>
                            <text class="status-label">LED灯</text>
                            <view class="status-indicator" :class="{active: led}">
                                <view class="status-dot"></view>
                                <text class="status-text">{{led ? '运行中' : '已停止'}}</text>
                            </view>
                        </view>
                        <view class="status-item-card">
                            <view class="status-icon-wrapper">
                                <text class="status-icon-text">💨</text>
                            </view>
                            <text class="status-label">风扇系统</text>
                            <view class="status-indicator" :class="{active: fan}">
                                <view class="status-dot"></view>
                                <text class="status-text">{{fan ? '运行中' : '已停止'}}</text>
                            </view>
                        </view>
                        <view class="status-item-card">
                            <view class="status-icon-wrapper">
                                <text class="status-icon-text">💧</text>
                            </view>
                            <text class="status-label">灌溉水泵</text>
                            <view class="status-indicator" :class="{active: water}">
                                <view class="status-dot"></view>
                                <text class="status-text">{{water ? '运行中' : '已停止'}}</text>
                            </view>
                        </view>
                        <view class="status-item-card">
                            <view class="status-icon-wrapper">
                                <text class="status-icon-text">📊</text>
                            </view>
                            <text class="status-label">数据采集</text>
                            <view class="status-indicator" :class="{active: stat}">
                                <view class="status-dot"></view>
                                <text class="status-text">{{stat ? '运行中' : '已停止'}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 设备控制卡片 -->
            <view class="data-card control-card">
                <view class="card-header">
                    <view class="card-icon control-icon">
                        <text class="icon-text">⚙️</text>
                    </view>
                    <text class="card-title">设备控制</text>
                </view>
                <view class="card-content">
                    <!-- 节点ID选择器 -->
                    <view class="node-selector-container">
                        <view class="selector-label">
                            <text class="selector-title">目标节点ID</text>
                            <view class="current-selection-row">
                                <text class="current-selection">当前选择: {{selectedNodeId || '未选择'}}</text>
                                <button class="manage-node-btn" @click="goToNodeManage">
                                    <text class="btn-text">管理节点</text>
                                </button>
                            </view>
                        </view>
                        <picker @change="onNodeIdChange" :value="nodeIdIndex" :range="nodeIdOptions" mode="selector">
                            <view class="node-selector">
                                <text class="selector-text">{{nodeIdOptions[nodeIdIndex] || '请选择节点ID'}}</text>
                                <text class="selector-arrow">▼</text>
                            </view>
                        </picker>
                    </view>
                    <view class="control-grid">
                        <view class="control-item">
                            <view class="control-info">
                                <view class="control-icon-wrapper">
                                    <text class="control-icon-text">💡</text>
                                </view>
                                <text class="control-label">LED灯</text>
                            </view>
                            <button class="control-switch" :class="{active: led}" @click="onLedSwitch({detail: {value: !led}})">
                                <view class="switch-track">
                                    <view class="switch-thumb"></view>
                                </view>
                            </button>
                        </view>
                        <view class="control-item">
                            <view class="control-info">
                                <view class="control-icon-wrapper">
                                    <text class="control-icon-text">💨</text>
                                </view>
                                <text class="control-label">风扇系统</text>
                            </view>
                            <button class="control-switch" :class="{active: fan}" @click="onFanSwitch({detail: {value: !fan}})">
                                <view class="switch-track">
                                    <view class="switch-thumb"></view>
                                </view>
                            </button>
                        </view>
                        <view class="control-item">
                            <view class="control-info">
                                <view class="control-icon-wrapper">
                                    <text class="control-icon-text">💧</text>
                                </view>
                                <text class="control-label">灌溉水泵</text>
                            </view>
                            <button class="control-switch" :class="{active: water}" @click="onWaterSwitch({detail: {value: !water}})">
                                <view class="switch-track">
                                    <view class="switch-thumb"></view>
                                </view>
                            </button>
                        </view>
                        <view class="control-item">
                            <view class="control-info">
                                <view class="control-icon-wrapper">
                                    <text class="control-icon-text">📊</text>
                                </view>
                                <text class="control-label">数据采集</text>
                            </view>
                            <button class="control-switch" :class="{active: stat}" @click="onStatSwitch({detail: {value: !stat}})">
                                <view class="switch-track">
                                    <view class="switch-thumb"></view>
                                </view>
                            </button>
                        </view>
                    </view>
                </view>
            </view>

            <!-- RGB灯控制卡片 -->
            <view class="data-card rgb-card">
                <view class="card-header">
                    <view class="card-icon rgb-icon">
                        <text class="icon-text">🌈</text>
                    </view>
                    <text class="card-title">RGB灯控制</text>
                </view>
                <view class="card-content">
                    <view class="rgb-control-container">
                        <!-- RGB颜色预览 -->
                        <view class="rgb-preview">
                            <view class="color-preview" :style="{backgroundColor: `rgb(${led_red}, ${led_green}, ${led_blue})`}"></view>
                            <text class="rgb-value">RGB({{led_red}}, {{led_green}}, {{led_blue}})</text>
                        </view>
                        
                        <!-- 红色滑动条 -->
                        <view class="slider-container">
                            <view class="slider-label">
                                <text class="slider-name">红色 (R)</text>
                                <text class="slider-value">{{led_red}}</text>
                            </view>
                            <slider 
                                class="rgb-slider red-slider" 
                                :value="led_red" 
                                min="0" 
                                max="255" 
                                @change="onRedChange" 
                                activeColor="#ef4444"
                                backgroundColor="#fee2e2"
                                block-color="#dc2626"
                                block-size="20"
                            />
                        </view>
                        
                        <!-- 绿色滑动条 -->
                        <view class="slider-container">
                            <view class="slider-label">
                                <text class="slider-name">绿色 (G)</text>
                                <text class="slider-value">{{led_green}}</text>
                            </view>
                            <slider 
                                class="rgb-slider green-slider" 
                                :value="led_green" 
                                min="0" 
                                max="255" 
                                @change="onGreenChange" 
                                activeColor="#22c55e"
                                backgroundColor="#dcfce7"
                                block-color="#16a34a"
                                block-size="20"
                            />
                        </view>
                        
                        <!-- 蓝色滑动条 -->
                        <view class="slider-container">
                            <view class="slider-label">
                                <text class="slider-name">蓝色 (B)</text>
                                <text class="slider-value">{{led_blue}}</text>
                            </view>
                            <slider 
                                class="rgb-slider blue-slider" 
                                :value="led_blue" 
                                min="0" 
                                max="255" 
                                @change="onBlueChange" 
                                activeColor="#3b82f6"
                                backgroundColor="#dbeafe"
                                block-color="#2563eb"
                                block-size="20"
                            />
                        </view>
                        
                        <!-- 应用按钮 -->
                        <button class="apply-rgb-btn" @click="applyRGBColor">
                            <view class="btn-content">
                                <text class="btn-icon">🎨</text>
                                <text class="btn-text">应用颜色</text>
                            </view>
                        </button>
                    </view>
                </view>
            </view>

            <!-- 阈值判断控制卡片 -->
            <view class="data-card threshold-card">
                <view class="card-header">
                    <view class="card-icon threshold-icon">
                        <text class="icon-text">🎯</text>
                    </view>
                    <text class="card-title">智能阈值控制</text>
                    <view class="threshold-master-status" :class="{active: thresholdEnabled}">
                        <view class="status-dot"></view>
                        <text class="status-text">{{thresholdEnabled ? '运行中' : '已停用'}}</text>
                    </view>
                </view>
                
                <!-- 主控制开关 -->
                <view class="threshold-master-control">
                    <view class="master-toggle-container">
                        <view class="toggle-info">
                            <text class="toggle-title">智能监控系统</text>
                            <!-- <text class="toggle-desc">自动监测环境参数并执行预设动作</text> -->
                        </view>
                        <button class="threshold-master-toggle" :class="{active: thresholdEnabled}" @click="toggleThreshold">
                            <view class="toggle-track">
                                <view class="toggle-thumb">
                                    <text class="toggle-icon">{{thresholdEnabled ? '✓' : '✕'}}</text>
                                </view>
                            </view>
                        </button>
                    </view>
                </view>
                <view class="card-content">
                    <view class="threshold-container">
                        <!-- 温度阈值 -->
                        <view class="threshold-item">
                            <view class="threshold-header">
                                <view class="threshold-info">
                                    <view class="threshold-icon-wrapper temp-gradient">
                                        <text class="threshold-emoji">🌡️</text>
                                    </view>
                                    <view class="threshold-details">
                                        <text class="threshold-name">温度监控</text>
                                        <text class="threshold-current">当前: {{temp}}℃</text>
                                    </view>
                                </view>
                                <view class="threshold-status" :class="{triggered: thresholdStatus.temp}">
                                    <view class="status-indicator"></view>
                                    <text class="status-label">{{thresholdStatus.temp ? '已触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config">
                                <view class="range-inputs">
                                    <view class="input-group">
                                        <text class="input-label">最小值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.temp.min" placeholder="15" />
                                            <text class="input-unit">℃</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">~</view>
                                    <view class="input-group">
                                        <text class="input-label">最大值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.temp.max" placeholder="35" />
                                            <text class="input-unit">℃</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onTempMinActionChange" :value="thresholds.temp.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.temp.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onTempMaxActionChange" :value="thresholds.temp.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.temp.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 湿度阈值 -->
                        <view class="threshold-item">
                            <view class="threshold-header">
                                <view class="threshold-info">
                                    <view class="threshold-icon-wrapper humi-gradient">
                                        <text class="threshold-emoji">💧</text>
                                    </view>
                                    <view class="threshold-details">
                                        <text class="threshold-name">湿度监控</text>
                                        <text class="threshold-current">当前: {{humi}}%</text>
                                    </view>
                                </view>
                                <view class="threshold-status" :class="{triggered: thresholdStatus.humi}">
                                    <view class="status-indicator"></view>
                                    <text class="status-label">{{thresholdStatus.humi ? '已触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config">
                                <view class="range-inputs">
                                    <view class="input-group">
                                        <text class="input-label">最小值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.humi.min" placeholder="30" />
                                            <text class="input-unit">%</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">~</view>
                                    <view class="input-group">
                                        <text class="input-label">最大值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.humi.max" placeholder="80" />
                                            <text class="input-unit">%</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onHumiMinActionChange" :value="thresholds.humi.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.humi.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onHumiMaxActionChange" :value="thresholds.humi.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.humi.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 光照阈值 -->
                        <view class="threshold-item">
                            <view class="threshold-header">
                                <view class="threshold-info">
                                    <view class="threshold-icon-wrapper light-gradient">
                                        <text class="threshold-emoji">☀️</text>
                                    </view>
                                    <view class="threshold-details">
                                        <text class="threshold-name">光照监控</text>
                                        <text class="threshold-current">当前: {{light}} lux</text>
                                    </view>
                                </view>
                                <view class="threshold-status" :class="{triggered: thresholdStatus.light}">
                                    <view class="status-indicator"></view>
                                    <text class="status-label">{{thresholdStatus.light ? '已触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config">
                                <view class="range-inputs">
                                    <view class="input-group">
                                        <text class="input-label">最小值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.light.min" placeholder="100" />
                                            <text class="input-unit">lux</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">~</view>
                                    <view class="input-group">
                                        <text class="input-label">最大值</text>
                                        <view class="input-wrapper">
                                            <input class="threshold-input" type="number" v-model="thresholds.light.max" placeholder="1000" />
                                            <text class="input-unit">lux</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onLightMinActionChange" :value="thresholds.light.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.light.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onLightMaxActionChange" :value="thresholds.light.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.light.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 雨水阈值 -->
                        <view class="threshold-item-modern">
                            <view class="threshold-info-header">
                                <view class="threshold-icon-area">
                                    <text class="threshold-icon">🌧️</text>
                                </view>
                                <view class="threshold-data-info">
                                    <text class="threshold-name">雨水监测</text>
                                    <text class="threshold-current-value">当前: {{rain}}</text>
                                </view>
                                <view class="threshold-status-indicator" :class="{triggered: thresholdStatus.rain}">
                                    <view class="status-dot"></view>
                                    <text class="status-label">{{thresholdStatus.rain ? '触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config-section">
                                <view class="range-inputs-container">
                                    <view class="range-input-group">
                                        <text class="range-label">最小值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.rain.min" placeholder="0" />
                                        </view>
                                    </view>
                                    <view class="range-separator">
                                        <text class="separator-text">至</text>
                                    </view>
                                    <view class="range-input-group">
                                        <text class="range-label">最大值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.rain.max" placeholder="100" />
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onRainMinActionChange" :value="thresholds.rain.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.rain.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onRainMaxActionChange" :value="thresholds.rain.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.rain.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- CO2阈值 -->
                        <view class="threshold-item-modern">
                            <view class="threshold-info-header">
                                <view class="threshold-icon-area">
                                    <text class="threshold-icon">⚗️</text>
                                </view>
                                <view class="threshold-data-info">
                                    <text class="threshold-name">CO2监测</text>
                                    <text class="threshold-current-value">当前: {{ph}}</text>
                                </view>
                                <view class="threshold-status-indicator" :class="{triggered: thresholdStatus.ph}">
                                    <view class="status-dot"></view>
                                    <text class="status-label">{{thresholdStatus.ph ? '触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config-section">
                                <view class="range-inputs-container">
                                    <view class="range-input-group">
                                        <text class="range-label">最小值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.ph.min" placeholder="300" />
                                            <text class="input-unit">ppm</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">
                                        <text class="separator-text">至</text>
                                    </view>
                                    <view class="range-input-group">
                                        <text class="range-label">最大值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.ph.max" placeholder="1000" />
                                            <text class="input-unit">ppm</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onPhMinActionChange" :value="thresholds.ph.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.ph.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onPhMaxActionChange" :value="thresholds.ph.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.ph.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 紫外线阈值 -->
                        <view class="threshold-item-modern">
                            <view class="threshold-info-header">
                                <view class="threshold-icon-area">
                                    <text class="threshold-icon">☀️</text>
                                </view>
                                <view class="threshold-data-info">
                                    <text class="threshold-name">紫外线监测</text>
                                    <text class="threshold-current-value">当前: {{uv}}</text>
                                </view>
                                <view class="threshold-status-indicator" :class="{triggered: thresholdStatus.uv}">
                                    <view class="status-dot"></view>
                                    <text class="status-label">{{thresholdStatus.uv ? '触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config-section">
                                <view class="range-inputs-container">
                                    <view class="range-input-group">
                                        <text class="range-label">最小值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.uv.min" placeholder="0" />
                                            <text class="input-unit">UV</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">
                                        <text class="separator-text">至</text>
                                    </view>
                                    <view class="range-input-group">
                                        <text class="range-label">最大值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.uv.max" placeholder="10" />
                                            <text class="input-unit">UV</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onUvMinActionChange" :value="thresholds.uv.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.uv.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onUvMaxActionChange" :value="thresholds.uv.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.uv.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 土壤湿度阈值 -->
                        <view class="threshold-item-modern">
                            <view class="threshold-info-header">
                                <view class="threshold-icon-area">
                                    <text class="threshold-icon">🌱</text>
                                </view>
                                <view class="threshold-data-info">
                                    <text class="threshold-name">土壤湿度监测</text>
                                    <text class="threshold-current-value">当前: {{soil}}%</text>
                                </view>
                                <view class="threshold-status-indicator" :class="{triggered: thresholdStatus.soil}">
                                    <view class="status-dot"></view>
                                    <text class="status-label">{{thresholdStatus.soil ? '触发' : '正常'}}</text>
                                </view>
                            </view>
                            <view class="threshold-config-section">
                                <view class="range-inputs-container">
                                    <view class="range-input-group">
                                        <text class="range-label">最小值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.soil.min" placeholder="20" />
                                            <text class="input-unit">%</text>
                                        </view>
                                    </view>
                                    <view class="range-separator">
                                        <text class="separator-text">至</text>
                                    </view>
                                    <view class="range-input-group">
                                        <text class="range-label">最大值</text>
                                        <view class="input-with-unit">
                                            <input class="range-input" type="number" v-model="thresholds.soil.max" placeholder="80" />
                                            <text class="input-unit">%</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">低于最小值动作</text>
                                    <picker @change="onSoilMinActionChange" :value="thresholds.soil.minActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬇️</view>
                                            <text class="action-text">{{actionOptions[thresholds.soil.minActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                                <view class="action-config">
                                    <text class="action-label">高于最大值动作</text>
                                    <picker @change="onSoilMaxActionChange" :value="thresholds.soil.maxActionIndex" :range="actionOptions" mode="selector">
                                        <view class="action-selector">
                                            <view class="action-icon">⬆️</view>
                                            <text class="action-text">{{actionOptions[thresholds.soil.maxActionIndex]}}</text>
                                            <text class="action-arrow">▼</text>
                                        </view>
                                    </picker>
                                </view>
                            </view>
                        </view>

                        <!-- 保存设置按钮 -->
                        <button class="save-threshold-btn" @click="saveThresholdSettings">
                            <view class="btn-content">
                                <text class="btn-icon">💾</text>
                                <text class="btn-text">保存阈值设置</text>
                            </view>
                        </button>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 底部操作区域 -->
        <view class="bottom-actions">
            <view class="update-info">
                <text class="update-label">最后更新</text>
                <text class="update-time">{{lastUpdateTime}}</text>
            </view>
            <view class="action-buttons">
                <button class="action-btn refresh-btn" @click="manualRefresh" :disabled="refreshing">
                    <view class="btn-content">
                        <text class="btn-icon" :class="{rotating: refreshing}">🔄</text>
                        <text class="btn-text">刷新数据</text>
                    </view>
                </button>
                <button class="action-btn token-btn" @click="manualGetToken" :disabled="gettingToken">
                    <view class="btn-content">
                        <text class="btn-icon">🔑</text>
                        <text class="btn-text">获取令牌</text>
                    </view>
                </button>
            </view>
            

        </view>
    </view>
</template>


<script>
	

	
    export default {
        data() {
            return {
                // 温度数据
                temp: '',
                // 湿度数据
                humi: '',
                // 灯状态
                led: true,
                // 风扇状态
                fan: false,
                // 水泵状态
                water: false,
                // 采集状态
                stat: false,
                // RGB灯控制
                led_red: 0,
                led_green: 0,
                led_blue: 0,
                // 主设备ID
                deviceId: 'my_central',//'central_wx_app',
                // 节点ID
                node_id: '',
                // 选择的节点ID用于发送命令
                selectedNodeId: 'node1',
                // 可选择的节点ID列表
                nodeIdOptions: ['1', '2', '3', '4', 'central'],
                // 节点ID选择器的索引
                nodeIdIndex: 0,
                // 自定义节点ID相关

                // 紫外线数据
                uv: '',
                // co2值数据
                ph: '',
                // 土壤湿度数据
                soil: '',
                // 雨水数据
                rain: '',
                // 光照数据
                light: '',
                // 认证令牌
                token: '',
                // 刷新相关状态
                refreshing: false,
                gettingToken: false,
                lastUpdateTime: '',
                refreshTimer: null,
                // 图表数据存储
                chartTempData: {
                    categories: [], // 时间轴
                    series: [{
                        name: '温度',
                        data: []
                    }]
                },
                chartHumiData: {
                    categories: [], // 时间轴
                    series: [{
                        name: '湿度',
                        data: []
                    }]
                },
                chartUVData: [],
                chartPHData: [],
                chartSoilData: [],
                chartRainData: [],
                chartLightData: [],
                
                // 阈值判断相关数据
                thresholdEnabled: false, // 阈值判断总开关
                // 阈值设置
                thresholds: {
                    temp: {
                        min: 15,
                        max: 35,
                        minActionIndex: 0,
                        maxActionIndex: 0,
                        minAction: 'led_on',
                        maxAction: 'led_on'
                    },
                    humi: {
                        min: 30,
                        max: 80,
                        minActionIndex: 0,
                        maxActionIndex: 2,
                        minAction: 'led_on',
                        maxAction: 'fan_on'
                    },
                    light: {
                        min: 100,
                        max: 1000,
                        minActionIndex: 0,
                        maxActionIndex: 1,
                        minAction: 'led_on',
                        maxAction: 'led_off'
                    },
                    rain: {
                        min: 0,
                        max: 100,
                        minActionIndex: 4,
                        maxActionIndex: 5,
                        minAction: 'water_on',
                        maxAction: 'water_off'
                    },
                    ph: {
                        min: 300,
                        max: 800,
                        minActionIndex: 2,
                        maxActionIndex: 3,
                        minAction: 'fan_on',
                        maxAction: 'fan_off'
                    },
                    uv: {
                        min: 0,
                        max: 10,
                        minActionIndex: 0,
                        maxActionIndex: 1,
                        minAction: 'led_on',
                        maxAction: 'led_off'
                    },
                    soil: {
                        min: 20,
                        max: 80,
                        minActionIndex: 4,
                        maxActionIndex: 5,
                        minAction: 'water_on',
                        maxAction: 'water_off'
                    }
                },
                // 阈值状态
                thresholdStatus: {
                    temp: false,
                    humi: false,
                    light: false,
                    rain: false,
                    ph: false,
                    uv: false,
                    soil: false
                },
                // 动作选项
                actionOptions: ['开启LED', '关闭LED', '开启风扇', '关闭风扇', '开启水泵', '关闭水泵', '开启采集', '关闭采集'],
                // 动作映射
                actionMap: {
                    '开启LED': 'led_on',
                    '关闭LED': 'led_off',
                    '开启风扇': 'fan_on',
                    '关闭风扇': 'fan_off',
                    '开启水泵': 'water_on',
                    '关闭水泵': 'water_off',
                    '开启采集': 'stat_on',
                    '关闭采集': 'stat_off'
                },
            }
        },

        onLoad() {
            // 检查用户登录状态
            this.checkLoginStatus();
            this.getToken();
            // 加载自定义节点
            this.loadCustomNodesFromStorage();
            // 初始化节点选择器
            this.initNodeSelector();
            // 加载阈值设置
            this.loadThresholdFromStorage();
        },
        onShow() {
            // 页面显示时，首次获取设备数据
            this.getShadow();
            // 启动30秒自动刷新定时器
            this.startAutoRefresh();
            // 同步节点管理页面的数据
            this.syncNodeData();
        },
        onHide() {
            // 页面隐藏时清除定时器
            this.stopAutoRefresh();
        },
        onUnload() {
            // 页面卸载时清除定时器
            this.stopAutoRefresh();
        },
        methods: {
            // 获取token的方法（使用云函数）
            async getToken() {
                console.log("开始获取Token...");
                try {
                    const result = await uniCloud.callFunction({
                        name: 'getToken'
                    });
                    
                    console.log('云函数返回结果:', result);
                    
                    if (result.result.code === 0) {
                        const token = result.result.data.token;
                        console.log("获取token成功:", token);
                        
                        // 保存token到本地缓存
                        uni.setStorageSync('token', token);
                        this.token = token;
                        
                        // 获取token后立即获取设备影子数据
                        this.getShadow();
                    } else {
                        console.log("获取token失败:", result.result.message);
                        uni.showToast({
                            title: 'Token获取失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                } catch (error) {
                    console.error('调用getToken云函数失败:', error);
                    uni.showToast({
                        title: 'Token获取失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            },
            // 手动获取token的方法（使用云函数）
            async manualGetToken() {
                if (this.gettingToken) {
                    return; // 如果正在获取，则不执行
                }
                console.log('手动获取Token');
                this.gettingToken = true;
                
                try {
                    const result = await uniCloud.callFunction({
                        name: 'getToken'
                    });
                    
                    console.log('手动获取Token云函数返回结果:', result);
                    
                    if (result.result.code === 0) {
                        const token = result.result.data.token;
                        console.log("手动获取token成功:", token);
                        
                        // 保存token到本地缓存
                        uni.setStorageSync('token', token);
                        this.token = token;
                        
                        // 显示成功提示
                        uni.showToast({
                            title: 'Token获取成功',
                            icon: 'success',
                            duration: 2000
                        });
                    } else {
                        console.log("手动获取token失败:", result.result.message);
                        
                        // 显示失败提示
                        uni.showToast({
                            title: 'Token获取失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                } catch (error) {
                    console.error('手动调用getToken云函数失败:', error);
                    
                    // 显示失败提示
                    uni.showToast({
                        title: 'Token获取失败',
                        icon: 'none',
                        duration: 2000
                    });
                } finally {
                    this.gettingToken = false;
                }
            },
            // 获取设备影子数据的方法（使用云函数）
            async getShadow() {
                console.log("开始获取设备影子数据...");
                this.refreshing = true; // 设置刷新状态
                
                try {
                    const token = uni.getStorageSync('token');
                    
                    if (!token) {
                        console.log('没有token，先获取token');
                        await this.getToken();
                        return;
                    }
                    
                    const result = await uniCloud.callFunction({
                        name: 'getDeviceData',
                        data: {
                            token: token
                        }
                    });
                    
                    console.log('获取设备数据云函数返回结果:', result);
                    
                    if (result.result.code === 0) {
                        const deviceData = result.result.data;
                        console.log('设备数据获取成功:', deviceData);
                        
                        // 更新组件的数据
                        this.temp = deviceData.temperature.toString();
                        this.humi = deviceData.humidity.toString();
                        this.led = deviceData.led;
                        this.fan = deviceData.fan;
                        this.water = deviceData.water;
                        this.stat = deviceData.stat;
                        this.uv = deviceData.uv.toString();
                        this.ph = deviceData.ph.toString();
                        this.soil = deviceData.soil.toString();
                        this.rain = deviceData.rain.toString();
                        this.light = deviceData.light.toString();
                        this.node_id = deviceData.node_id ? deviceData.node_id.toString() : '';
                        
                        // // 更新RGB颜色值（如果设备数据中包含）
                        // if (deviceData.led_red !== undefined) this.led_red = deviceData.led_red;
                        // if (deviceData.led_green !== undefined) this.led_green = deviceData.led_green;
                        // if (deviceData.led_blue !== undefined) this.led_blue = deviceData.led_blue;
                        
                        // 更新最后刷新时间
                        this.updateLastRefreshTime();
                        
                        // 检查阈值
                        this.checkThresholds();
                        
                        console.log('设备数据更新完成');
                        
                    } else if (result.result.code === 401) {
                        console.log('Token已过期，重新获取token');
                        await this.getToken();
                    } else {
                        console.log('获取设备数据失败:', result.result.message);
                        uni.showToast({
                            title: '获取数据失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                    
                } catch (error) {
                    console.error('调用getDeviceData云函数失败:', error);
                    
                    // 检查是否是网络连接问题
                    if (error.message && error.message.includes('网络连接失败')) {
                        uni.showToast({
                            title: '网络连接失败',
                            icon: 'none',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: '获取数据失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                } finally {
                    this.refreshing = false; // 确保刷新状态被重置
                }
            },
            // 灯状态改变时的处理方法
            onLedSwitch(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                this.setCommand('led', value);
            },
            // 风扇状态改变时的处理方法
            onFanSwitch(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                this.setCommand('fan', value);
            },
            // 水泵状态改变时的处理方法
            onWaterSwitch(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                this.setCommand('water', value);
            },
            // 采集状态改变时的处理方法
            onStatSwitch(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                this.setCommand('stat', value);
            },
            // 节点ID选择改变时的处理方法
            onNodeIdChange(event) {
                console.log('picker change event:', event);
                console.log('event.detail:', event.detail);
                console.log('event.detail.value:', event.detail.value);
                console.log('nodeIdOptions:', this.nodeIdOptions);
                
                this.nodeIdIndex = event.detail.value;
                this.selectedNodeId = this.nodeIdOptions[event.detail.value];
                console.log('选择的节点ID:', this.selectedNodeId);
                
                // 显示选择结果的提示
                uni.showToast({
                    title: `已选择: ${this.selectedNodeId}`,
                    duration: 1500
                });
            },
            // 初始化节点选择器
            initNodeSelector() {
                // 确保nodeIdIndex和selectedNodeId同步
                if (this.nodeIdOptions && this.nodeIdOptions.length > 0) {
                    // 如果selectedNodeId已设置，找到对应的索引
                    if (this.selectedNodeId) {
                        const index = this.nodeIdOptions.indexOf(this.selectedNodeId);
                        if (index !== -1) {
                            this.nodeIdIndex = index;
                        } else {
                            // 如果找不到，重置为第一个选项
                            this.nodeIdIndex = 0;
                            this.selectedNodeId = this.nodeIdOptions[0];
                        }
                    } else {
                        // 如果selectedNodeId未设置，使用第一个选项
                        this.nodeIdIndex = 0;
                        this.selectedNodeId = this.nodeIdOptions[0];
                    }
                    console.log('节点选择器初始化完成:', {
                        nodeIdIndex: this.nodeIdIndex,
                        selectedNodeId: this.selectedNodeId,
                        nodeIdOptions: this.nodeIdOptions
                    });
                }
            },
                
                // 跳转到节点管理页面
                goToNodeManage() {
                    uni.navigateTo({
                        url: '/pages/NodeManage/NodeManage?selectedNodeId=' + this.selectedNodeId
                    });
                },
                
                // 同步节点管理页面的数据
                syncNodeData() {
                    try {
                        // 重新加载自定义节点
                        this.nodeIdOptions = ['1', '2', '3', '4', 'central']; // 重置为默认节点
                        this.loadCustomNodesFromStorage(); // 重新加载自定义节点
                        
                        // 从本地存储获取最新的节点数据
                        const savedSelectedNodeId = uni.getStorageSync('selectedNodeId');
                        const savedNodeIdIndex = uni.getStorageSync('nodeIdIndex');
                        
                        // 如果有保存的数据，则更新当前页面的数据
                        if (savedSelectedNodeId && this.nodeIdOptions.includes(savedSelectedNodeId)) {
                            this.selectedNodeId = savedSelectedNodeId;
                            this.nodeIdIndex = this.nodeIdOptions.indexOf(savedSelectedNodeId);
                        } else if (savedNodeIdIndex !== null && savedNodeIdIndex !== undefined && savedNodeIdIndex < this.nodeIdOptions.length) {
                            this.nodeIdIndex = savedNodeIdIndex;
                            this.selectedNodeId = this.nodeIdOptions[savedNodeIdIndex];
                        }
                    } catch (e) {
                        console.error('同步节点数据失败:', e);
                    }
                },
                
                // 获取自定义节点列表（排除默认节点）
                getCustomNodes() {
                    const defaultNodes = ['1', '2', '3', '4', 'central'];
                    return this.nodeIdOptions.filter(nodeId => !defaultNodes.includes(nodeId));
                },
                
                // 从本地存储加载自定义节点
                loadCustomNodesFromStorage() {
                    try {
                        const customNodes = uni.getStorageSync('customNodes') || [];
                        if (Array.isArray(customNodes)) {
                            // 将自定义节点添加到选项列表（避免重复）
                            customNodes.forEach(nodeId => {
                                if (!this.nodeIdOptions.includes(nodeId)) {
                                    this.nodeIdOptions.push(nodeId);
                                }
                            });
                            console.log('从本地存储加载自定义节点:', customNodes);
                        }
                    } catch (e) {
                        console.error('加载自定义节点失败:', e);
                    }
                },
            // 设备命令下发方法
            setCommand(deviceType, value) {
                console.log("开始下发命令。。。");//打印完整消息 
                var that = this;  //这个很重要，在下面的回调函数中由于异步问题不能有效修改变量，需要用that获取 
                var token = uni.getStorageSync('token');//读缓存中保存的token 
                
                // 更新对应的设备状态
                switch(deviceType) {
                    case 'led':
                        this.led = value;
                        break;
                    case 'fan':
                        this.fan = value;
                        break;
                    case 'water':
                        this.water = value;
                        break;
                    case 'stat':
                        this.stat = value;
                        break;
                }
                
                // 构建包含全部8个参数的命令数据，按照指定顺序：gather, open_fan, open_water, open_led, led_red, led_blue, led_green, id
                let commandData = `{"service_id": "Switch","command_name": "control","paras": { "gather":${this.stat ? 'true' : 'false'}, "open_fan":${this.fan ? 'true' : 'false'}, "open_water":${this.water ? 'true' : 'false'}, "open_led":${this.led ? 'true' : 'false'}, "led_red":${this.led_red}, "led_blue":${this.led_blue}, "led_green":${this.led_green}, "id":"${this.selectedNodeId || ''}" }}`;
                
                let deviceName = '';
                switch(deviceType) {
                    case 'led':
                        deviceName = 'LED';
                        break;
                    case 'fan':
                        deviceName = '风扇';
                        break;
                    case 'water':
                        deviceName = '水泵';
                        break;
                    case 'stat':
                        deviceName = '采集状态';
                        break;
                    default:
                        console.log('未知设备类型：' + deviceType);
                        return;
                }
                
                uni.request({ 
                    url: `https://c5291326ae.iotda-app.cn-south-4.myhuaweicloud.com/v5/iot/9a8b9ae393844bce8de80dbc4ed08df2/devices/${this.deviceId}/commands`, 
                    data: commandData, 
                    method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
                    header: {'content-type': 'application/json','X-Auth-Token': token }, //请求的header  
                    success: function(res) {// success 
                        // success 
                        console.log("下发命令成功");//打印完整消息 
                        console.log(res);//打印完整消息 
                        console.log(deviceName + ' ' + (value ? 'ON' : 'OFF') + ' !');
                    }, 
                    fail: function() { 
                        // fail 
                        console.log("命令下发失败");//打印完整消息 
                        console.log("请先获取token");//打印完整消息 
                    }, 
                    complete: function() { 
                        // complete 
                        console.log("命令下发完成");//打印完整消息 
                    }  
                }); 
            },
            
            // RGB颜色控制方法
            onRedChange(e) {
                this.led_red = e.detail.value;
            },
            
            onGreenChange(e) {
                this.led_green = e.detail.value;
            },
            
            onBlueChange(e) {
                this.led_blue = e.detail.value;
            },
            
            // 应用RGB颜色
            applyRGBColor() {
                console.log("开始设置RGB颜色...");
                var token = uni.getStorageSync('token');
                
                if (!token) {
                    uni.showToast({
                        title: '请先获取Token',
                        icon: 'none'
                    });
                    return;
                }
                
                // 构建包含全部8个参数的命令数据，按照指定顺序：gather, open_fan, open_water, open_led, led_red, led_blue, led_green, id
                let commandData = `{"service_id": "Switch","command_name": "control","paras": { "gather":${this.stat ? 'true' : 'false'}, "open_fan":${this.fan ? 'true' : 'false'}, "open_water":${this.water ? 'true' : 'false'}, "open_led":${this.led ? 'true' : 'false'}, "led_red":${this.led_red}, "led_blue":${this.led_blue}, "led_green":${this.led_green}, "id":"${this.selectedNodeId || ''}" }}`;
                
                uni.request({
                    url: `https://c5291326ae.iotda-app.cn-south-4.myhuaweicloud.com/v5/iot/9a8b9ae393844bce8de80dbc4ed08df2/devices/${this.deviceId}/commands`,
                    data: commandData,
                    method: 'POST',
                    header: {
                        'content-type': 'application/json',
                        'X-Auth-Token': token
                    },
                    success: (res) => {
                        console.log("RGB颜色设置成功", res);
                        uni.showToast({
                            title: `RGB颜色已设置为(${this.led_red}, ${this.led_green}, ${this.led_blue})`,
                            icon: 'success',
                            duration: 2000
                        });
                    },
                    fail: (err) => {
                        console.log("RGB颜色设置失败", err);
                        uni.showToast({
                            title: 'RGB颜色设置失败',
                            icon: 'none'
                        });
                    },
                    complete: () => {
                        console.log("RGB颜色设置完成");
                    }
                });
            },
            // 保存数据到云数据库的方法
            async saveDataToCloud(data) {
                try {
                    const result = await uniCloud.callFunction({
                        name: 'addData',
                        data: data
                    });
                    
                    if (result.result.code === 0) {
                        console.log('数据保存到云数据库成功:', result.result.data);
                    } else {
                        console.error('数据保存失败:', result.result.message);
                    }
                } catch (error) {
                    console.error('调用云函数失败:', error);
                }
            },
            // 跳转到图表页面的方法
            goCharts(tabIndex) {
                // 将标签索引保存到本地存储，因为tabBar页面不能通过URL传参
                uni.setStorageSync('chartTabIndex', tabIndex);
                // 切换到图表页面的tabBar
                uni.switchTab({
                    url: '../Charts/Charts',
                    success: function() {
                        console.log('切换到图表页面成功');
                    },
                    fail: function(err) {
                        console.error('切换到图表页面失败:', err);
                        uni.showToast({
                            title: '页面切换失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            },
            // 手动刷新方法
            manualRefresh() {
                if (this.refreshing) {
                    return; // 如果正在刷新，则不执行
                }
                console.log('手动刷新数据');
                this.getShadow();
            },
            // 启动自动刷新定时器
            startAutoRefresh() {
                // 先清除可能存在的定时器
                this.stopAutoRefresh();
                // 启动30秒自动刷新
                this.refreshTimer = setInterval(() => {
                    console.log('自动刷新数据');
                    this.getShadow();
                }, 30000);
                console.log('启动30秒自动刷新定时器');
            },
            // 停止自动刷新定时器
            stopAutoRefresh() {
                if (this.refreshTimer) {
                    clearInterval(this.refreshTimer);
                    this.refreshTimer = null;
                    console.log('停止自动刷新定时器');
                }
            },
            // 更新最后刷新时间
            updateLastRefreshTime() {
                const now = new Date();
                const timeString = now.getHours().toString().padStart(2, '0') + ':' + 
                                 now.getMinutes().toString().padStart(2, '0') + ':' + 
                                 now.getSeconds().toString().padStart(2, '0');
                this.lastUpdateTime = timeString;
            },
            
            // 检查用户登录状态
            checkLoginStatus() {
                const token = uni.getStorageSync('token')
                const userInfo = uni.getStorageSync('userInfo')
                
                // 如果没有token或用户信息，跳转到登录页
                if (!token || !userInfo) {
                    console.log('用户未登录，跳转到登录页')
                    uni.reLaunch({
                        url: '/pages/login/login'
                    })
                    return
                }
                
                // 如果有登录信息，继续正常流程
            console.log('用户已登录，加载页面数据')
            // 页面加载时获取认证令牌
            this.getToken()
        },
        
        // 阈值判断相关方法
        // 切换阈值判断总开关
        toggleThreshold() {
            this.thresholdEnabled = !this.thresholdEnabled;
            uni.showToast({
                title: this.thresholdEnabled ? '阈值判断已启用' : '阈值判断已禁用',
                icon: 'success',
                duration: 1500
            });
            // 保存设置到本地存储
            this.saveThresholdToStorage();
        },
        
        // 检查阈值并执行相应动作
        checkThresholds() {
            if (!this.thresholdEnabled) {
                return;
            }
            
            // 检查温度阈值
            const tempValue = parseFloat(this.temp);
            if (!isNaN(tempValue)) {
                const tempThreshold = this.thresholds.temp;
                if (tempValue < tempThreshold.min) {
                    this.executeThresholdAction('temp', tempThreshold.minAction, '低于最小值');
                } else if (tempValue > tempThreshold.max) {
                    this.executeThresholdAction('temp', tempThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查湿度阈值
            const humiValue = parseFloat(this.humi);
            if (!isNaN(humiValue)) {
                const humiThreshold = this.thresholds.humi;
                if (humiValue < humiThreshold.min) {
                    this.executeThresholdAction('humi', humiThreshold.minAction, '低于最小值');
                } else if (humiValue > humiThreshold.max) {
                    this.executeThresholdAction('humi', humiThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查光照阈值
            const lightValue = parseFloat(this.light);
            if (!isNaN(lightValue)) {
                const lightThreshold = this.thresholds.light;
                if (lightValue < lightThreshold.min) {
                    this.executeThresholdAction('light', lightThreshold.minAction, '低于最小值');
                } else if (lightValue > lightThreshold.max) {
                    this.executeThresholdAction('light', lightThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查雨水阈值
            const rainValue = parseFloat(this.rain);
            if (!isNaN(rainValue)) {
                const rainThreshold = this.thresholds.rain;
                if (rainValue < rainThreshold.min) {
                    this.executeThresholdAction('rain', rainThreshold.minAction, '低于最小值');
                } else if (rainValue > rainThreshold.max) {
                    this.executeThresholdAction('rain', rainThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查CO2阈值
            const phValue = parseFloat(this.ph);
            if (!isNaN(phValue)) {
                const phThreshold = this.thresholds.ph;
                if (phValue < phThreshold.min) {
                    this.executeThresholdAction('ph', phThreshold.minAction, '低于最小值');
                } else if (phValue > phThreshold.max) {
                    this.executeThresholdAction('ph', phThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查紫外线阈值
            const uvValue = parseFloat(this.uv);
            if (!isNaN(uvValue)) {
                const uvThreshold = this.thresholds.uv;
                if (uvValue < uvThreshold.min) {
                    this.executeThresholdAction('uv', uvThreshold.minAction, '低于最小值');
                } else if (uvValue > uvThreshold.max) {
                    this.executeThresholdAction('uv', uvThreshold.maxAction, '高于最大值');
                }
            }
            
            // 检查土壤湿度阈值
            const soilValue = parseFloat(this.soil);
            if (!isNaN(soilValue)) {
                const soilThreshold = this.thresholds.soil;
                if (soilValue < soilThreshold.min) {
                    this.executeThresholdAction('soil', soilThreshold.minAction, '低于最小值');
                } else if (soilValue > soilThreshold.max) {
                    this.executeThresholdAction('soil', soilThreshold.maxAction, '高于最大值');
                }
            }
        },
        
        // 执行阈值触发的动作
        executeThresholdAction(sensorType, action, triggerType) {
            console.log(`阈值触发: ${sensorType}, 触发类型: ${triggerType}, 执行动作: ${action}`);
            
            // 显示阈值触发提示
            const sensorNames = {
                temp: '温度',
                humi: '湿度',
                light: '光照',
                rain: '雨水',
                ph: 'CO2',
                uv: '紫外线',
                soil: '土壤湿度'
            };
            
            uni.showToast({
                title: `${sensorNames[sensorType]}${triggerType}`,
                icon: 'none',
                duration: 2000
            });
            
            // 根据动作类型执行相应的控制命令
            switch(action) {
                case 'led_on':
                    this.setCommand('led', true);
                    break;
                case 'led_off':
                    this.setCommand('led', false);
                    break;
                case 'fan_on':
                    this.setCommand('fan', true);
                    break;
                case 'fan_off':
                    this.setCommand('fan', false);
                    break;
                case 'water_on':
                    this.setCommand('water', true);
                    break;
                case 'water_off':
                    this.setCommand('water', false);
                    break;
                case 'stat_on':
                    this.setCommand('stat', true);
                    break;
                case 'stat_off':
                    this.setCommand('stat', false);
                    break;
                default:
                    console.log('未知的动作类型:', action);
            }
        },
        
        // 动作选择器变化事件处理
        // 温度阈值动作处理
        onTempMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.temp.minActionIndex = index;
            this.thresholds.temp.minAction = Object.values(this.actionMap)[index];
        },
        
        onTempMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.temp.maxActionIndex = index;
            this.thresholds.temp.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 湿度阈值动作处理
        onHumiMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.humi.minActionIndex = index;
            this.thresholds.humi.minAction = Object.values(this.actionMap)[index];
        },
        
        onHumiMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.humi.maxActionIndex = index;
            this.thresholds.humi.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 光照阈值动作处理
        onLightMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.light.minActionIndex = index;
            this.thresholds.light.minAction = Object.values(this.actionMap)[index];
        },
        
        onLightMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.light.maxActionIndex = index;
            this.thresholds.light.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 雨水阈值动作处理
        onRainMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.rain.minActionIndex = index;
            this.thresholds.rain.minAction = Object.values(this.actionMap)[index];
        },
        
        onRainMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.rain.maxActionIndex = index;
            this.thresholds.rain.maxAction = Object.values(this.actionMap)[index];
        },
        
        // CO2阈值动作处理
        onPhMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.ph.minActionIndex = index;
            this.thresholds.ph.minAction = Object.values(this.actionMap)[index];
        },
        
        onPhMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.ph.maxActionIndex = index;
            this.thresholds.ph.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 紫外线阈值动作处理
        onUvMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.uv.minActionIndex = index;
            this.thresholds.uv.minAction = Object.values(this.actionMap)[index];
        },
        
        onUvMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.uv.maxActionIndex = index;
            this.thresholds.uv.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 土壤湿度阈值动作处理
        onSoilMinActionChange(e) {
            const index = e.detail.value;
            this.thresholds.soil.minActionIndex = index;
            this.thresholds.soil.minAction = Object.values(this.actionMap)[index];
        },
        
        onSoilMaxActionChange(e) {
            const index = e.detail.value;
            this.thresholds.soil.maxActionIndex = index;
            this.thresholds.soil.maxAction = Object.values(this.actionMap)[index];
        },
        
        // 保存阈值设置
        saveThresholdSettings() {
            this.saveThresholdToStorage();
            uni.showToast({
                title: '阈值设置已保存',
                icon: 'success',
                duration: 1500
            });
        },
        
        // 保存阈值设置到本地存储
        saveThresholdToStorage() {
            const thresholdData = {
                enabled: this.thresholdEnabled,
                thresholds: this.thresholds
            };
            uni.setStorageSync('thresholdSettings', thresholdData);
        },
        
        // 从本地存储加载阈值设置
        loadThresholdFromStorage() {
            try {
                const thresholdData = uni.getStorageSync('thresholdSettings');
                if (thresholdData) {
                    this.thresholdEnabled = thresholdData.enabled || false;
                    if (thresholdData.thresholds) {
                        // 合并保存的阈值设置，保留默认值作为备用
                        Object.keys(thresholdData.thresholds).forEach(key => {
                            if (this.thresholds[key]) {
                                Object.assign(this.thresholds[key], thresholdData.thresholds[key]);
                            }
                        });
                    }
                }
            } catch (error) {
                console.error('加载阈值设置失败:', error);
            }
        },

        }
    }
</script>


<style>
/* 简约优雅的色彩方案 */
.container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    padding: 0;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* 状态栏 - 简约风格 */
.status-bar {
    display: flex;
    justify-content: space-around;
    padding: 24rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    margin: 16rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    flex: 1;
}

.status-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    position: relative;
    animation: pulse 2s infinite;
}

.status-dot.running {
    background: #34d399;
    box-shadow: 0 0 16rpx rgba(52, 211, 153, 0.5);
}

.status-dot.normal {
    background: #22d3ee;
    box-shadow: 0 0 16rpx rgba(34, 211, 238, 0.5);
}

.status-dot.online {
    background: #fbbf24;
    box-shadow: 0 0 16rpx rgba(251, 191, 36, 0.5);
}

.status-dot.info {
    background: #3b82f6;
    box-shadow: 0 0 16rpx rgba(59, 130, 246, 0.5);
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.status-text {
    font-size: 24rpx;
    color: #64748b;
    font-weight: 500;
}

.status-value {
    font-size: 28rpx;
    color: #1e293b;
    font-weight: 600;
}

/* 主要内容区域 */
.main-content {
    padding: 0 16rpx 160rpx 16rpx;
    position: relative;
    z-index: 1;
}

/* 数据卡片通用样式 - 简约风格 */
.data-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    margin-bottom: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20rpx);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.data-card:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    position: relative;
}

.card-icon {
    width: 44rpx;
    height: 44rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.environment-icon {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    box-shadow: 0 4rpx 12rpx rgba(34, 211, 238, 0.3);
}

.soil-icon {
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
    box-shadow: 0 4rpx 12rpx rgba(132, 204, 22, 0.3);
}

.light-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4rpx 12rpx rgba(251, 191, 36, 0.3);
}

.status-icon {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 4rpx 12rpx rgba(52, 211, 153, 0.3);
}

.control-icon {
    background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
    box-shadow: 0 4rpx 12rpx rgba(245, 222, 179, 0.3);
}

.icon-text {
    font-size: 22rpx;
    color: white;
}

.card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.card-arrow {
    font-size: 32rpx;
    color: #94a3b8;
    font-weight: 300;
}

/* 数据网格布局 */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12rpx;
}

.data-grid.single-item {
    grid-template-columns: 1fr;
}

.data-item {
    display: flex;
    align-items: center;
    padding: 16rpx;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 16rpx;
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.3s ease;
}

.data-item:hover {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.7) 100%);
    transform: translateY(-1rpx);
}

.data-item.large {
    padding: 24rpx;
    justify-content: center;
}

.data-icon {
    font-size: 28rpx;
    margin-right: 12rpx;
    filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.data-icon.large {
    font-size: 40rpx;
    margin-right: 16rpx;
}

.data-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.data-label {
    font-size: 22rpx;
    color: #64748b;
    margin-bottom: 4rpx;
    font-weight: 500;
}

.data-value-container {
    display: flex;
    align-items: baseline;
    gap: 4rpx;
}

.data-value {
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    line-height: 1;
}

.data-value.large {
    font-size: 44rpx;
    text-align: center;
}

.data-unit {
    font-size: 20rpx;
    color: #64748b;
    font-weight: 500;
}

/* 设备状态网格 */
.status-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12rpx;
}

.status-item-card {
    display: flex;
    align-items: center;
    padding: 16rpx;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 16rpx;
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.3s ease;
    flex: 1;
    min-width: calc(50% - 6rpx);
}

.status-icon-wrapper {
    width: 36rpx;
    height: 36rpx;
    border-radius: 10rpx;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(52, 211, 153, 0.25);
}

.status-icon-text {
    font-size: 18rpx;
    color: white;
}

.status-label {
    flex: 1;
    font-size: 28rpx;
    color: #1e293b;
    font-weight: 500;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.status-indicator .status-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

.status-indicator.active .status-dot {
    background: #34d399;
    box-shadow: 0 0 12rpx rgba(52, 211, 153, 0.5);
}

.status-indicator .status-text {
    font-size: 24rpx;
    color: #64748b;
    font-weight: 500;
}

.status-indicator.active .status-text {
    color: #34d399;
}

/* 控制网格 */
.control-grid {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
}

.control-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 16rpx;
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.3s ease;
}

.control-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.control-icon-wrapper {
    width: 36rpx;
    height: 36rpx;
    border-radius: 10rpx;
    background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(245, 222, 179, 0.25);
}

.control-icon-text {
    font-size: 18rpx;
    color: white;
}

.control-label {
    font-size: 28rpx;
    color: #1e293b;
    font-weight: 500;
}

/* 开关样式 */
.control-switch {
    width: 80rpx;
    height: 44rpx;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.switch-track {
    width: 80rpx;
    height: 44rpx;
    background: #e2e8f0;
    border-radius: 22rpx;
    position: relative;
    transition: all 0.3s ease;
    border: 2rpx solid #f1f5f9;
}

.control-switch.active .switch-track {
    background: #34d399;
    border-color: #34d399;
}

.switch-thumb {
    width: 36rpx;
    height: 36rpx;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2rpx;
    left: 2rpx;
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.control-switch.active .switch-thumb {
    transform: translateX(36rpx);
}

/* 底部操作区域 - 简约风格 */
.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    padding: 20rpx 16rpx;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
    z-index: 100;
}



.update-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    padding: 12rpx 16rpx;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 12rpx;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.update-label {
    font-size: 24rpx;
    color: #64748b;
    font-weight: 500;
}

.update-time {
    font-size: 24rpx;
    color: #1e293b;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    gap: 8rpx;
}

.action-btn {
    flex: 1;
    height: 64rpx;
    border-radius: 12rpx;
    border: none;
    font-size: 24rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.refresh-btn {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.25);
}

.token-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.25);
}

.action-btn:hover {
    transform: translateY(-1rpx);
}

.action-btn:active {
    transform: translateY(1rpx);
}

.action-btn:disabled {
    opacity: 0.6;
    transform: none;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.btn-icon {
    font-size: 28rpx;
    filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.1));
}

.btn-text {
    font-size: 28rpx;
    font-weight: 600;
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 特殊卡片样式 */
.environment-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.soil-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.light-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.status-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.control-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* 节点选择器样式 */
.node-selector-container {
    margin-bottom: 30rpx;
    padding: 20rpx;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 16rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.05);
}

.selector-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
}

.selector-title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
}

.current-selection {
    font-size: 24rpx;
    color: #666666;
    background: rgba(0, 0, 0, 0.05);
    padding: 6rpx 12rpx;
    border-radius: 8rpx;
}

.current-selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rpx;
}

.node-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 2rpx solid #e5e7eb;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.node-selector:active {
    background: #f9fafb;
    border-color: #3b82f6;
    transform: scale(0.98);
}

.selector-text {
    font-size: 28rpx;
    color: #374151;
    font-weight: 500;
}

.selector-arrow {
    font-size: 24rpx;
    color: #9ca3af;
    transition: transform 0.3s ease;
}

/* 自定义节点管理样式 */
.custom-node-section {
    margin-top: 32rpx;
    padding: 24rpx;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16rpx;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.custom-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.custom-node-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2937;
}

.manage-node-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 16rpx;
    padding: 8rpx 16rpx;
    font-size: 22rpx;
    font-weight: 500;
    box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.manage-node-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1rpx 4rpx rgba(16, 185, 129, 0.4);
}



.add-node-container {
    margin-top: 20rpx;
    padding: 20rpx;
    background: white;
    border-radius: 12rpx;
    border: 1px solid #e5e7eb;
}

.input-group {
    display: flex;
    gap: 16rpx;
    align-items: center;
}

.node-input {
    flex: 1;
    padding: 16rpx 20rpx;
    border: 2rpx solid #e5e7eb;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #374151;
    background: #fafbfc;
    transition: all 0.3s ease;
}

.node-input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.1);
}

.add-node-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10rpx;
    padding: 16rpx 24rpx;
    font-size: 26rpx;
    font-weight: 500;
    box-shadow: 0 2rpx 6rpx rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.add-node-btn:disabled {
    background: #d1d5db;
    box-shadow: none;
    color: #9ca3af;
}

.add-node-btn:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: 0 1rpx 3rpx rgba(16, 185, 129, 0.4);
}

.custom-nodes-list {
    margin-top: 24rpx;
}

.list-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #374151;
    margin-bottom: 16rpx;
    display: block;
}

.custom-node-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 20rpx;
    margin-bottom: 12rpx;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10rpx;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.custom-node-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
}

.node-name {
    font-size: 28rpx;
    color: #374151;
    font-weight: 500;
}

.remove-node-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8rpx;
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    font-weight: 500;
    box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
    transition: all 0.3s ease;
}

.remove-node-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1rpx 2rpx rgba(239, 68, 68, 0.4);
}

.remove-text {
    font-size: 24rpx;
}

.btn-text {
    font-size: 26rpx;
}

/* RGB控制卡片样式 */
.rgb-card {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
    margin-bottom: 20rpx;
}

.rgb-icon {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
}

.rgb-control-container {
    padding: 20rpx;
}

.rgb-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 30rpx;
    padding: 20rpx;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
}

.color-preview {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    border: 4rpx solid #ffffff;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
    margin-bottom: 15rpx;
}

.rgb-value {
    font-size: 28rpx;
    color: #666666;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

.slider-container {
    margin-bottom: 25rpx;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
}

.slider-name {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
}

.slider-value {
    font-size: 26rpx;
    color: #666666;
    background: rgba(0, 0, 0, 0.05);
    padding: 8rpx 16rpx;
    border-radius: 12rpx;
    min-width: 60rpx;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.rgb-slider {
    margin: 10rpx 0;
    transform: scale(1.1);
}

.apply-rgb-btn {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    border-radius: 20rpx;
    padding: 0;
    margin-top: 20rpx;
    box-shadow: 0 6rpx 15rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.apply-rgb-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.3);
}

.apply-rgb-btn .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18rpx 30rpx;
}

.apply-rgb-btn .btn-icon {
    font-size: 26rpx;
    margin-right: 12rpx;
}

.apply-rgb-btn .btn-text {
    font-size: 26rpx;
    font-weight: 600;
    color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .data-item {
        padding: 12rpx;
    }
    
    .data-value {
        font-size: 28rpx;
    }
    
    .data-value.large {
        font-size: 36rpx;
    }
    
    .action-btn {
        height: 72rpx;
        font-size: 26rpx;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .container {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    }
    
    .data-card {
        background: rgba(30, 41, 59, 0.95);
        border-color: rgba(71, 85, 105, 0.3);
    }
    
    .card-title {
        color: #e2e8f0;
    }
    
    .data-value {
        color: #f1f5f9;
    }
    
    .status-text {
        color: #94a3b8;
    }
    
    .status-indicator {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }
    
    .status-indicator.active .status-text {
        color: #34d399;
    }
    
    .status-value {
        color: #e2e8f0;
    }
}

/* 阈值判断UI优化样式 */
.threshold-item {
    margin-bottom: 24rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 24rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.threshold-item:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
}

.threshold-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.threshold-info {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.threshold-icon-wrapper {
    width: 56rpx;
    height: 56rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.temp-gradient {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
}

.humi-gradient {
    background: linear-gradient(135deg, #4ecdc4 0%, #6dd5ed 100%);
}

.light-gradient {
    background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
}

.threshold-emoji {
    font-size: 28rpx;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.threshold-details {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
}

.threshold-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.2;
}

.threshold-current {
    font-size: 24rpx;
    color: #718096;
    font-weight: 500;
}

.threshold-status {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    background: rgba(74, 222, 128, 0.1);
    border: 1rpx solid rgba(74, 222, 128, 0.2);
    transition: all 0.3s ease;
}

.threshold-status.triggered {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

.status-indicator {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse-green 2s infinite;
}

.threshold-status.triggered .status-indicator {
    background: #f87171;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.status-label {
    font-size: 24rpx;
    font-weight: 600;
    color: #059669;
}

.threshold-status.triggered .status-label {
    color: #dc2626;
}

.threshold-config {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.input-label {
    font-size: 24rpx;
    color: #4a5568;
    font-weight: 500;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: #f7fafc;
    border: 2rpx solid #e2e8f0;
    border-radius: 12rpx;
    padding: 0 16rpx;
    transition: all 0.3s ease;
}

.input-wrapper:focus-within {
    border-color: #3182ce;
    background: #ffffff;
    box-shadow: 0 0 0 6rpx rgba(49, 130, 206, 0.1);
}

.threshold-input {
    flex: 1;
    height: 72rpx;
    font-size: 28rpx;
    color: #2d3748;
    background: transparent;
    border: none;
    outline: none;
}

.input-unit {
    font-size: 24rpx;
    color: #718096;
    font-weight: 500;
    margin-left: 8rpx;
}

.range-separator {
    font-size: 32rpx;
    color: #a0aec0;
    font-weight: 600;
    margin-top: 32rpx;
}

.action-config {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
}

.action-label {
    font-size: 24rpx;
    color: #4a5568;
    font-weight: 500;
}

.action-selector {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx 20rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12rpx;
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.action-selector:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
}

.action-icon {
    font-size: 24rpx;
    color: #ffffff;
}

.action-text {
    flex: 1;
    font-size: 26rpx;
    color: #ffffff;
    font-weight: 600;
}

.action-arrow {
    font-size: 20rpx;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
}

/* 现代化阈值判断组件样式 */
.threshold-item-modern {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2rpx solid rgba(226, 232, 240, 0.8);
    border-radius: 20rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.threshold-item-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 20rpx 20rpx 0 0;
}

.threshold-item-modern:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
    border-color: rgba(102, 126, 234, 0.3);
}

.threshold-info-header {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 32rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid rgba(226, 232, 240, 0.6);
}

.threshold-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.threshold-icon {
    font-size: 36rpx;
    color: #ffffff;
}

.threshold-data-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.threshold-name {
    font-size: 32rpx;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.2;
}

.threshold-current-value {
    font-size: 26rpx;
    color: #718096;
    font-weight: 500;
}

.threshold-status-indicator {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 12rpx 20rpx;
    background: rgba(72, 187, 120, 0.1);
    border: 2rpx solid rgba(72, 187, 120, 0.2);
    border-radius: 12rpx;
    transition: all 0.3s ease;
}

.threshold-status-indicator.triggered {
    background: rgba(245, 101, 101, 0.1);
    border-color: rgba(245, 101, 101, 0.3);
}

.status-dot {
    width: 16rpx;
    height: 16rpx;
    background: #48bb78;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.threshold-status-indicator.triggered .status-dot {
    background: #f56565;
}

.status-label {
    font-size: 24rpx;
    font-weight: 600;
    color: #48bb78;
}

.threshold-status-indicator.triggered .status-label {
    color: #f56565;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.threshold-config-section {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.range-inputs-container {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 24rpx;
    background: rgba(247, 250, 252, 0.8);
    border-radius: 16rpx;
    border: 2rpx solid rgba(226, 232, 240, 0.5);
}

.range-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
}

.range-label {
    font-size: 24rpx;
    color: #4a5568;
    font-weight: 600;
    text-align: center;
}

.input-with-unit {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2rpx solid rgba(203, 213, 224, 0.6);
    border-radius: 12rpx;
    padding: 16rpx 20rpx;
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.input-with-unit:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
    background: #ffffff;
}

.range-input {
    flex: 1;
    font-size: 28rpx;
    font-weight: 600;
    color: #2d3748;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
}

.input-unit {
    font-size: 24rpx;
    color: #718096;
    font-weight: 600;
    margin-left: 8rpx;
}

.range-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rpx;
}

.separator-text {
    font-size: 24rpx;
    color: #a0aec0;
    font-weight: 600;
    background: #ffffff;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    border: 2rpx solid rgba(160, 174, 192, 0.3);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .threshold-item-modern {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(45, 55, 72, 0.95) 100%);
        border-color: rgba(71, 85, 105, 0.4);
    }
    
    .threshold-item-modern:hover {
        border-color: rgba(102, 126, 234, 0.5);
    }
    
    .threshold-info-header {
        border-bottom-color: rgba(71, 85, 105, 0.4);
    }
    
    .threshold-name {
        color: #e2e8f0;
    }
    
    .threshold-current-value {
        color: #94a3b8;
    }
    
    .range-inputs-container {
        background: rgba(45, 55, 72, 0.6);
        border-color: rgba(71, 85, 105, 0.4);
    }
    
    .range-label, .action-label {
        color: #cbd5e0;
    }
    
    .input-with-unit {
        background: rgba(45, 55, 72, 0.8);
        border-color: rgba(74, 85, 104, 0.4);
    }
    
    .input-with-unit:focus-within {
        background: rgba(45, 55, 72, 0.9);
        border-color: #63b3ed;
    }
    
    .range-input {
        color: #e2e8f0;
    }
    
    .separator-text {
        background: rgba(45, 55, 72, 0.8);
        color: #cbd5e0;
        border-color: rgba(74, 85, 104, 0.4);
    }
    
    .rgb-preview {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .slider-name {
        color: #e2e8f0;
    }
    
    .slider-value {
        background: rgba(255, 255, 255, 0.1);
        color: #e2e8f0;
    }
    
    .rgb-value {
        color: #cbd5e1;
    }
}
</style>